<template>

  <div class="right">
    <div class="G_head">
      <div class="search">
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="likeName"
        >
        </el-input>
      </div>
      <div class="searchButton">
        <button class="button button_s" @click="serachGoods">搜索</button>
      </div>
    </div>
    <div class="Button_A">
      <button class="button button_a" @click="toAgoods">
        新增商品
      </button>
    </div>
    <div>
      <table class="GoodsList" cellspacing="0" border="1">
        <tbody v-for="good in totalData">
        <tr>
          <td id="img" rowspan="2" width="225" height="200">
            <img width="225" height="200" :src="good.gimg">
          </td>
          <td colspan="2" width="451.53" height="100">{{good.gname}}</td>
          <td rowspan="2" width="225" height="200">
            <button class="button button_p" @click="toGoodsDetail(good.gid)">详情</button>
          </td>
          <td rowspan="2" width="225" height="200">
            <button class="button button_d" @click="deleteGoods(good.gid)">删除</button>
          </td>
          <td rowspan="2" width="225" height="200">
            <button class="button button_m" @click="changeState(good.gid,good.gstate)">{{good.gstate}}</button>
          </td>
        </tr>
        <tr>
          <td width="221.17" height="96"><span class="span">￥{{good.price}}</span></td>
          <td width="221.2" height="96">库存：{{good.ginventory}}</td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="page">
      <el-pagination
        background
        :page-size="5"
        @current-change="currentChange"
        :total="pageTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {updateGoodsState, deleteGood, selectBymId, findPageBymId} from '@/api/merchant'

  export default {
    components: {},
    name: "Goods",
    data() {
      return {
        mId: this.$store.state.merchant.mid,

        totalData: [],
        pageTotal: 1,

        likeName: '',
        state: '上架',
      };
    },
    methods: {
      //删除方法
      deleteGoods(gId) {
        deleteGood({
          gId: gId,
        }).then(result => {
          // console.log(result)
        })
        this.selectAllGoods()
        this.currentChange()
      },
      //搜索框方法
      serachGoods() {
        this.selectAllGoods()
        this.currentChange()
      },
      //通过mId查询的结果进行分页
      currentChange(val) {
        if (val == null){
          val = 1
        }
        findPageBymId({
          mId: this.mId,
          pageNum: val,
          gName: this.likeName,
        }).then((result => {
          // console.log(result.data.data)
          this.totalData = result.data.data
        }))
        // console.log(this.gName)
        // console.log("currentChange:"+val)
      },
      //跳转到新增商品页面
      toAgoods() {
        this.$router.push({path: '/Agoods'})
      },
      //跳转到商品详情页面
      toGoodsDetail(gId){
        this.$router.push({
          path:'/GoodsDetail',
          query:{
            gId:gId,
          }
        })
      },
      //通过mId查询商品
      selectAllGoods() {
        selectBymId({
          mId: this.mId,
          gName: this.likeName,
        }).then((result => {
          this.pageTotal = result.data.data.length
          // console.log(result)
        }))
      },
      //上下架状态的改变
      changeState(gId,gState) {
        if (gState=="上架"){
          gState="下架"
        }else{
          gState="上架"
        }
        updateGoodsState({
          gId:gId,
          gState:gState
        }).then(result => {
          window.location.reload()
          // console.log(result)
        })
      }
    },
    created() {
      this.selectAllGoods()
      this.currentChange()
    },
  };
</script>

<style scoped>
  .page {
    position: absolute;
    top: 1200px;
    left: 500px;
  }

  .span {
    color: red;
  }

  .right {
    position: absolute;
    width: 1365px;
    top: 100px;
    left: 170px;
    bottom: 0;
    /* padding: 10px; */
    overflow-y: auto; /* 当内容过多时y轴出现滚动条 */
    background-color: rgb(250, 247, 199);
  }

  .G_head {
    position: absolute;
    width: 1365px;
    height: 100px;
    top: 0px;
    left: 0px;
    /* background-color: aqua; */
  }

  .search {
    position: absolute;
    width: 300px;
    height: 50px;
    top: 30px;
    left: 300px;
    /* background-color: antiquewhite; */
  }

  .searchButton {
    position: absolute;
    /* width: 200px;
    height: 70px; */
    top: 30px;
    left: 650px;


  }

  .button {
    width: 150px;
    border: none;
    color: black;
    padding: 12px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    background-color: rgb(245, 212, 142);
  }

  .Button_A {
    position: absolute;
    top: 30px;
    left: 900px;
    width: 150px;
  }

  .GoodsList {
    position: absolute;
    width: 100%;
    height: 200px;
    top: 100px;
    left: 0px;
    background-color: wheat;;
  }

</style>
